<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/common.jsp"%>
<html>
<head>
<title>个人信息</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.imgareaselect.pack.js"></script>

<link type="text/css" rel="stylesheet"
	href="${pageContext.request.contextPath}/css/blue/pageCommon.css" />
<link rel='stylesheet' type='text/css'
	href='${pageContext.request.contextPath}/css/blue/imgareaselect-default.css'>
</head>
<script type="text/javascript">
	$(window).load(function() {
	   var impagepath = $("#imageValue").val();
	   if(impagepath)
	   {
	     impagepath = "${pageContext.request.contextPath}/images/userImage/"+ impagepath;
	     $("#imgSrc").attr("src",impagepath);
	   }	
	   
		$("#previwimg").imgAreaSelect({
			aspectRatio : '1:1', //截取比例
			show : true,
			resizable : true, //是否可调整大小
			autoHide : false,//选择框选择完毕是否自己取消
			handles : true,
			key : true, //是否启用键盘，默认为false
			//x1: 75, y1: 30, x2:225, y2: 180, //需要处理的区域，原始的
			//x1:左上角x轴坐标 y1:左上角y轴坐标 x2:右下角x轴坐标 y2:右下角y轴坐标
			keys : {
				arrows : 1,
				ctrl : 5,
				shift : 'resize'
			}, //调整像素大小
			//onInit:function(img, selection) { ias.setSelection(100, 50, 250, 150, true);ias.update(); }, //设置初始函数 画出选择框
			onSelectChange : preview
		//选框移动时触发的事件
		//onSelectEnd:function(img, select){alert(select.width)} //选框结束时触发的事件
		});
	});

	$(document)
			.ready(
					function() {
						$(
								'<td><div><img id="view" src="#" style="position: relative;"/></div></td>')
								.css({
									float : 'left',
									position : 'relative',
									overflow : 'hidden',
									width : '100px',
									height : '100px'
								}).insertAfter("#preview");//把新建元素放到 #previwimg 之后

						$("input[type='file']").change(function() {
							/*  document.form1.path.value=this.value; */
							previewImage(this);
						});
					});

	function preview(img, selection) {
		var scaleX = 100 / (selection.width || 1);
		var scaleY = 100 / (selection.height || 1);

		$("#view").css({
			width : Math.round(scaleX * 300) + 'px',
			height : Math.round(scaleY * 220) + 'px',
			marginLeft : '-' + Math.round(scaleX * selection.x1) + 'px',
			marginTop : '-' + Math.round(scaleY * selection.y1) + 'px'
		});
	}

	function previewImage(file) {
		var porImg = $("#previwimg"), //首先获取大图片jquery对象
		viewImg = $("#view");//小图片jquery对象
		//判断该浏览器是否为w3c标准，既非IE浏览器 
		if (file["files"] && file["files"][0]) {
			//使用JavaScript的FileReader对象来读取本地数据，并且将数据结果赋值给image的src，具体该对象如何实现的还未深入研究
			var reader = new FileReader();
			reader.onload = function(evt) {
				porImg.attr({
					src : evt.target.result
				});
				viewImg.attr({
					src : evt.target.result
				});
			};
			reader.readAsDataURL(file.files[0]);
		}
		//如果是IE浏览器，采用滤镜效果，进行显示，但特别注意的是该滤镜效果使用的对象是div对象，并非img对象，因此我们需要将原有的img对象remove同时生成新的div对象，并且赋值相应的class和id
		else {
			//创建需要滤镜显示的div的dom对象
			var ieImageDom = document.createElement("div");
			var proIeImageDom = document.createElement("div");
			//设置对象的css属性和原有的img对象属性相同，添加相应的id属性值
			$(ieImageDom).css({
				float : 'left',
				position : 'relative',
				overflow : 'hidden',
				width : '120px',
				height : '120px'
			}).attr({
				"id" : "view"
			});
			$(proIeImageDom).attr({
				"id" : "previwimg"
			});
			//删除原有img对象，append创建div的dom对象
			porImg.parent().prepend(proIeImageDom);
			porImg.remove();
			viewImg.parent().append(ieImageDom);
			viewImg.remove();
			//采用滤镜效果生成图片预览
			file.select();
			path = document.selection.createRange().text;
			$(ieImageDom)
					.css(
							{
								"filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
										+ path + "\")"
							});
			$(proIeImageDom)
					.css(
							{
								"filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
										+ path + "\")"
							});
			// .style.filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ path + "\")";//使用滤镜效果
		}
	}
</script>
<body>
	<!-- 标题显示 -->
	<div id="Title_bar">
		<div id="Title_bar_Head">
			<div id="Title_Head"></div>
			<div id="Title">
				<!--页面标题-->
				<img border="0" width="13" height="13"
					src="${pageContext.request.contextPath}/css/images/title_arrow.gif" />
				个人信息
			</div>
			<div id="Title_End"></div>
		</div>
	</div>

	<!--显示表单内容-->
	<div id=MainArea>
		<s:form name="form1" action="editInfoAction_editInfo.do" method="POST"
			enctype="multipart/form-data">
			<div class="ItemBlock_Title1">
				<!-- 信息说明<DIV CLASS="ItemBlock_Title1">
        	<IMG BORDER="0" WIDTH="4" HEIGHT="7" SRC="${pageContext.request.contextPath}/css/blue/images/item_point.gif" /> 个人信息 </DIV>  -->
			</div>

			<!-- 表单内容显示 -->
			<div class="ItemBlockBorder">
				<div class="ItemBlock">
					<table cellpadding="0" cellspacing="0" class="mainForm">
						<s:hidden name="uid" />
						<tr>
							<td width="150">用户ID（登录名）</td>
							<td><s:property value="username" />
							</td>
							 <s:hidden id="imageValue" name="image" />
							<td rowspan="3">
							    <img width="100" id="imgSrc" height="100"  src="${pageContext.request.contextPath}/css/blue/images/default.gif" />
							</td>
						</tr>
						<tr>
							<td>部门</td>
							<td><s:property value="department.name" />
							</td>
						</tr>
						<tr>
							<td>岗位</td>
							<td><s:iterator value="roles">
									<s:property value="name" />
								</s:iterator></td>
						</tr>
						<tr>
							<td>头像</td> 
							<td><input type="file" name="resource" class="InputStyle"
								style="width: 400px;" id="picpath" />
							</td>
						</tr>

						<tr>
							<td id="preview" align="left">
								<div>
									<img id="previwimg" width="300" height="200" src="#"
										alt="请选择您 要上传的头像" />
								</div>
							</td>
						</tr>
					</table>
				</div>
			</div>

			<!-- 表单操作 -->
			<div id="InputDetailBar">
				<input type="image"
					src="${pageContext.request.contextPath}/css/images/save.png" /> <a
					href="javascript:history.go(-1);"><img
					src="${pageContext.request.contextPath}/css/images/goBack.png" />
				</a>
			</div>
		</s:form>
	</div>

	<div class="Description">
		验证规则：<br /> 1，可以修改自已的头像，在右侧是头像的预览。<br />
	</div>

</body>
</html>
